<template>
    <div class="app-container">
        <el-row :gutter="20" style="padding: 20px 0px 50px 0px;">
            <el-col :span="12" :xs="24">
                <el-descriptions border title="角色信息">
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon>
                                    <UserFilled />
                                </el-icon>
                                角色名称
                            </div>
                        </template>
                        {{ roleInfo.name }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon>
                                    <OfficeBuilding />
                                </el-icon>
                                归属机构
                            </div>
                        </template>
                        {{ roleInfo.officeName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="英文名称">{{ roleInfo.enname }}</el-descriptions-item>
                    <el-descriptions-item label="数据范围">
                        <dict-tag :options="sys_data_scope" :value="roleInfo.data_scope" />
                    </el-descriptions-item>
                    <el-descriptions-item label="角色类型">{{ roleInfo.role_type }}</el-descriptions-item>
                    <el-descriptions-item label="权限字符">{{ roleInfo.role_key }}</el-descriptions-item>
                </el-descriptions>
            </el-col>
        </el-row>
        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
            <el-form-item label="用户名称" prop="login_name">
                <el-input v-model="queryParams.login_name" placeholder="请输入用户名称" clearable style="width: 240px"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 240px"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
    
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="openSelectUser">添加用户</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="CircleClose" :disabled="multiple"
                    @click="cancelAuthUserAll">批量取消授权</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
    
        <el-table stripe v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="归属医院" prop="company" :show-overflow-tooltip="true" />
            <el-table-column label="归属部门" prop="office" :show-overflow-tooltip="true" />
            <el-table-column label="用户名称" prop="login_name" :show-overflow-tooltip="true" />
            <el-table-column label="用户姓名" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
            <el-table-column label="手机" prop="mobile" :show-overflow-tooltip="true" />
            <el-table-column label="座机" prop="phone" :show-overflow-tooltip="true" />
            <el-table-column label="状态" align="center" prop="login_flag">
                <template #default="scope">
                    <dict-tag :options="use_status" :value="scope.row.login_flag" />
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="CircleClose" @click="cancelAuthUser(scope.row)">取消授权</el-button>
                </template>
            </el-table-column>
        </el-table>
    
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
        <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
    </div>
</template>

<script setup name="AuthUser">
	import selectUser from "./selectUser";

	import { allocatedUserList, authUserCancel, authUserCancelAll, getRoleInfo } from "@/api/system/role";

	/* 路由 */
	const route = useRoute();
	/* this */
	const { proxy } = getCurrentInstance();
	/* 字典数据 (是否启用、数据范围) */
	const { use_status, sys_data_scope } = proxy.useDict("use_status", "sys_data_scope");

	/* 用户列表 */
	const userList = ref([]);
	/* 表格加载动画 */
	const loading = ref(true);
	/* 显示条件 */
	const showSearch = ref(true);
	/* 是否启用批量取消 */
	const multiple = ref(true);
	/* 分页总条数 */
	const total = ref(0);
	/* 用户id */
	const userIds = ref([]);
	/* 角色信息 */
	const roleInfo = ref({});

	/* 查询条件 */
	const queryParams = reactive({
		pageNum: 1,
		pageSize: 10,
		roleId: route.params.roleId,
		login_name: undefined,
		mobile: undefined,
	});

	/** 查询授权用户列表 */
	function getList() {
		loading.value = true;
		allocatedUserList(queryParams).then(response => {
			userList.value = response.data;
			total.value = response.total;
			loading.value = false;
		});
	}
	// 返回按钮
	function handleClose() {
		const obj = { path: "/institutionuser/role" };
		proxy.$tab.closeOpenPage(obj);
	}
	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.pageNum = 1;
		getList();
	}
	/** 重置按钮操作 */
	function resetQuery() {
		proxy.resetForm("queryRef");
		handleQuery();
	}
	// 多选框选中数据
	function handleSelectionChange(selection) {
		userIds.value = selection.map(item => item.id);
		multiple.value = !selection.length;
	}
	/** 打开授权用户表弹窗 */
	function openSelectUser() {
		proxy.$refs["selectRef"].show();
	}
	/** 取消授权按钮操作 */
	function cancelAuthUser(row) {
		proxy.$modal.confirm('确认要取消该用户"' + row.login_name + '"角色吗？').then(function () {
			return authUserCancel({ userId: row.id, roleId: queryParams.roleId });
		}).then(() => {
			getList();
			proxy.$modal.msgSuccess("取消授权成功");
		}).catch(() => { });
	}
	/** 批量取消授权按钮操作 */
	function cancelAuthUserAll(row) {
		const roleId = queryParams.roleId;
		const uIds = userIds.value.join(",");
		proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
			return authUserCancelAll({ roleId: roleId, userIds: uIds });
		}).then(() => {
			getList();
			proxy.$modal.msgSuccess("取消授权成功");
		}).catch(() => { });
	}

	/** 绑定角色信息 */
	function bindRoleInfo() {
		getRoleInfo(queryParams.roleId).then(response => {
			roleInfo.value = response.data;
		})
	}

	getList();
	bindRoleInfo();
</script>
<style scoped>
.office-label {
    height: 40px;
    background: #f8fcff;
    line-height: 40px;
    padding-left: 10px;
    font-weight: bold;
    border: 0.5px solid #e2e2e2;
    border-radius: 5px;
}

.app-container {
    padding-top: 0px;
}

.cell-item {
    display: flex;
    align-items: center;
}
</style>